import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import PlayerRankings from "@/components/player-rankings"
import { Trophy, MessageSquare, Home } from "lucide-react"
import SearchButton from "@/components/search-button"
import type { PlayerCategory } from "@/lib/types"
import ModeIcon from "@/components/mode-icons"

const categoryIcons = [
  { category: "overall" as PlayerCategory, icon: <ModeIcon category="overall" size={20} />, color: "text-yellow-500", label: "总排行榜" },
  { category: "combat" as PlayerCategory, icon: <ModeIcon category="combat" size={20} />, color: "text-gray-400", label: "SWORD" },
  { category: "crystal" as PlayerCategory, icon: <ModeIcon category="crystal" size={20} />, color: "text-purple-500", label: "CRYSTAL" },
  { category: "heart" as PlayerCategory, icon: <ModeIcon category="heart" size={20} />, color: "text-red-400", label: "BUHC" },
  { category: "potion" as PlayerCategory, icon: <ModeIcon category="potion" size={20} />, color: "text-pink-400", label: "POTION" },
  { category: "discord" as PlayerCategory, icon: <ModeIcon category="discord" size={20} />, color: "text-purple-400", label: "NPOT" },
  { category: "circle" as PlayerCategory, icon: <ModeIcon category="circle" size={20} />, color: "text-emerald-500", label: "SMP" },
]

export default function HomePage() {
  return (
    <div className="min-h-screen bg-[#1a1d24] text-white">
      <header className="border-b border-gray-800">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <span className="text-2xl font-bold bg-gradient-to-r from-yellow-500 to-orange-500 bg-clip-text text-transparent">
                CN
              </span>
              <span className="text-2xl font-bold">TIERS</span>
            </div>
            <nav className="flex items-center gap-6">
              <a href="#" className="flex items-center gap-2 text-gray-400 hover:text-white">
                <Home className="h-4 w-4" />
                <span>首页</span>
              </a>
              <a href="#" className="flex items-center gap-2 text-white">
                <Trophy className="h-4 w-4" />
                <span>排行</span>
              </a>
              <a href="#" className="flex items-center gap-2 text-gray-400 hover:text-white">
                <MessageSquare className="h-4 w-4" />
                <span>社区</span>
              </a>
            </nav>
            <div className="relative w-64">
              <SearchButton />
            </div>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-4 py-6">
        <Tabs defaultValue="overall" className="w-full">
          <TabsList className="flex gap-1 bg-transparent mb-6">
            {categoryIcons.map(({ category, icon, color, label }) => (
              <TabsTrigger
                key={category}
                value={category}
                className="data-[state=active]:bg-[#2a2e35] data-[state=active]:text-white bg-transparent"
              >
                <div className="flex items-center gap-2 px-4 py-2">
                  <div className={color}>{icon}</div>
                  {label && <span>{label}</span>}
                </div>
              </TabsTrigger>
            ))}
          </TabsList>

          {categoryIcons.map(({ category }) => (
            <TabsContent key={category} value={category}>
              <PlayerRankings category={category} />
            </TabsContent>
          ))}
        </Tabs>
      </main>
    </div>
  )
}

